<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>客户管理</title>
    <!-- 字体 -->
    <link rel="stylesheet" href="./css/font-awesome.min.css">
    <!-- 初始化CSS -->
    <link rel="stylesheet" href="./css/init.css">
    <!-- head -->
    <link rel="stylesheet" href="./css/header.css">
    <!-- loading -->
    <link rel="stylesheet" href="./css/qiein-loading.css">
    <!-- 公共 -->
    <link rel="stylesheet" href="./css/common.css">
    <!-- 本页面 -->
    <link rel="stylesheet" href="css/customer-manager.css">
    <script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/vue/2.1.10/vue.min.js"></script>
    <script src="./js/mock.js"></script>
    <!-- layer -->
    <script src="./js/layer/layer.js"></script>
    <script src="./js/laydate.js"></script>
</head>

<body>
    <div class="all-contain" id="qiein-app">
        <!-- 头部样式 -->
        <header class="qiein-head">
            <div class="qiein-logo">
                <img src="img/qiein-logo.png" alt="">
            </div>
            <!-- 头部导航 -->
            <div class="head-nav">
                客户管理<i class="fa fa-angle-down"></i>
                <div class="head-nav-ul-wrap">
                    <ul>
                        <li onclick="location.href='./index.html'">预约日历</li>
                        <li onclick="location.href='./customer-manager.html'">销售客户管理</li>
                        <li onclick="location.href='./operation-record.html'">操作记录</li>
                    </ul>
                </div>
            </div>
            <!-- 头部搜索 -->
            <div class="head-search">
                <div>
                    <i class="fa fa-search"></i>
                    <input type="text">
                </div>
            </div>
            <!-- 头部提示 -->
            <div class="head-prompt">
                <i class="fa fa-bell"></i>
                <span>1</span>
            </div>
            <div class="login-user">
                <span><i class="fa fa-user"></i></span>
                <div>超级管理员</div>
            </div>
        </header>
        <!-- 头部样式 end-->
        <div class="qiein-search">
            <ul>
                <!-- 1 -->
                <li class="borderR paddingR-1x">
                    <!-- 时间选项 -->
                    <div class="time-opt floatL">
                        <div class="select-style">
                            <input type="text" placeholder="时间选择" readonly>
                            <ul>
                                <li>预约时间</li>
                                <li>发片时间</li>
                                <li>回件时间</li>
                                <li>打包时间</li>
                                <li>发货时间</li>
                            </ul>
                        </div>
                    </div>
                    <div class="time-start-end floatL marginL-1x">
                        <input type="text" placeholder="开始时间" class="floatL">
                        <input type="text" placeholder="结束时间" class="floatL">
                    </div>
                    <!-- 搜索时间按钮样式 -->
                    <div class="search-time-wrap floatL marginL-1x">
                        <button class="btn">搜索</button>
                        <span class="c1"><i class="fa fa-filter"></i><div class="search-time-ul-wrap">
                        <ul>
                            <li>今日</li>
                            <li>昨日</li>
                            <li>本周</li>
                            <li>上周</li>
                            <li>本月</li>
                            <li>上月</li>
                        </ul>
                    </div></span>
                    </div>
                    <!-- 搜索时间按钮样式 end -->
                </li>
                <!-- 2 -->
                <li class="paddingL-1x">
                    <div class="multiselect-style">
                        <input type="text" placeholder="全部渠道" readonly>
                        <i class="fa fa-angle-down"></i>
                        <ul>
                            <li>
                                <input type="checkbox">全部渠道</li>
                            <li>
                                <input type="checkbox">线上</li>
                            <li>
                                <input type="checkbox">A</li>
                            <li>
                                <input type="checkbox">B</li>
                        </ul>
                    </div>
                    <div class="multiselect-style marginT-1x">
                        <input type="text" placeholder="全部人员" readonly>
                        <i class="fa fa-angle-down"></i>
                        <ul>
                            <li>
                                <input type="checkbox">全部人员</li>
                            <li>
                                <input type="checkbox">小李</li>
                            <li>
                                <input type="checkbox">小王</li>
                            <li>
                                <input type="checkbox">小于</li>
                        </ul>
                    </div>
                </li>
                <!-- 3 -->
                <li class="paddingL-1x paddingR-1x borderR">
                    <div class="multiselect-style">
                        <input type="text" placeholder="全部类型" readonly>
                        <i class="fa fa-angle-down"></i>
                        <ul>
                            <li>
                                <input type="checkbox">全部类型</li>
                            <li>
                                <input type="checkbox">线上</li>
                            <li>
                                <input type="checkbox">A</li>
                            <li>
                                <input type="checkbox">B</li>
                        </ul>
                    </div>
                </li>
                <!-- 4 -->
                <li class="paddingL-1x">
                    <div class="operation-ul-wrap">
                        <ul>
                            <li class="marginR-1x" id="add"><span><i class="fa fa-plus"></i></span><span>录入</span></li>
                            <li class="marginR-1x"><span><i class="fa fa-times"></i></span><span>删除</span></li>
                            <!--   <li class="marginR-1x"><span><i class="fa fa-sign-out"></i></span><span>导出</span></li> -->
                            <li><span><i class="fa fa-refresh"></i></span><span>刷新</span></li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
        <!--tab开始  -->
        <div class="tab-style marginT-1x " id="tabs-vue">
            <ul>
                <li v-for='(tab,index) in tabs' @click='changeTab(tab,index)' :class="{'tab-active': index === isActive}"><span v-text="tab.text"></span>(<span v-text="tab.value"></span>)</li>
            </ul>
        </div>
        <!-- tab结束  -->
        <!-- table表格开始 -->
        <div class="table-wrap" id="table-vue">
            <div id="table-thead" class="table-thead" @scroll="tableHeadScrollDo()" ref="table-thead">
                <table class="table-style">
                    <!-- 表头的遍历（固定的表头） -->
                    <thead>
                        <tr>
                         <!--    <th>
                                <div :style="{width:tableCheckBox._width}">
                                    <input type="checkbox">
                                </div>
                            </th> -->
                            <th v-for="(tableHead,index) in tableHeads">
                                <!-- 如果可排序 -->
                                <div v-if="tableHead.sortAble" :style="{width:tableHead._widthHead}">
                                    <span v-text="tableHead.text"></span>
                                    <i class="fa fa-angle-down" @click="sorting(index,tableHead.name,tableHead.asc)" :style="{transform:tableHead.asc?'':'rotate(180deg)'}"></i>
                                </div>
                                <!-- 不可排序 -->
                                <div v-else :style="{width:tableHead._widthHead}">
                                    <span v-text="tableHead.text"></span>
                                </div>
                            </th>
                        </tr>
                    </thead>
                </table>
            </div>
            <!-- table样式  开始 -->
            <div id="table-tbody" class="table-tbody" @scroll="tableScroll(event)" ref="table-tbody">
                <table class="table-style" id="table1">
                    <thead>
                        <!-- 表头的遍历(真实表头，实际是隐藏的) -->
                        <tr>
                          <!--   <th>
                              <input type="checkbox">
                          </th> -->
                            <th v-for="(tableHead,index) in tableHeads" :style="{width:tableHead._width}">
                                <span v-text="tableHead.text"></span>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- <tr v-for="tableData in paginationVue.pageLen"> -->
                        <!--  <td v-for="x in 3" v-text="x+'asdadsad'"></td>  -->
                        <template v-for="x in 50">
                            <tr v-for="tableData in tableDatas">
                               <!--  <td>
                                    <input type="checkbox">
                                </td> -->
                                <td v-for="data in tableDatas[0]" v-text="x+data"></td>
                            </tr>
                        </template>
                    </tbody>
                </table>
            </div>
            <!-- table样式  结束 -->
        </div>
        <!-- 表格样式结束 -->
        <!-- 分页样式开始 -->
        <div class="pagination-style" id="pagination-vue">
            <div class="vue-select-style page-length" id="select">
                <div @click="inputClick()">
                    <input type="text" v-model="val" readonly>
                    <i class="fa fa-angle-down" :class="{'vue-select-style-active':show}"></i>
                </div>
                <dl v-show="show" style="display: none;">
                    <dd v-for="option of options" v-text="option.text" @click="optClick(option)"></dd>
                </dl>
            </div>
            <div class="paging-style" id="paging">
                <div class="pages-info">
                    共<span v-text="totalRecords"></span>条
                </div>
                <ul>
                    <!-- 前一页 -->
                    <li @click="forwardPage()" :class="{'not-click':start==0}">
                        <i class="fa fa-angle-left"></i>
                    </li>
                    <li v-for="page of pages" v-text="page" :class="{active:page==start+1}" @click="turnPage(page-1)">1</li>
                    <!-- 后一页 -->
                    <li @click="nextPage()" :class="{'not-click':start==(totalPage-1)}">
                        <i class="fa fa-angle-right"></i>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 分页样式结束 -->
    </div>
    <!-- 添加面板 -->
    <template id="addPanle">
        <div class="addPanle">
            <div class="addPanle-title">
                <ul>
                    <li class="add-card-tab-active">基本信息</li>
                    <li>修改日志</li>
                </ul>
            </div>
            <div class="addPanle-status">
                <div>
                    分类：<span>到店</span>
                </div>
                <div>
                    录入时间:<span>2016-8-8</span>
                </div>
            </div>
            <div class="add-card">
                <table>
                    <tr>
                        <td>
                            <input type="" name="" placeholder="男方姓名">
                        </td>
                        <td>
                            <input type="" name="" placeholder="男方电话">
                        </td>
                        <td>
                            <input type="" name="" placeholder="微信号">
                        </td>
                        <td>
                            <input type="" name="" placeholder="QQ">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="" name="" placeholder="配偶姓名">
                        </td>
                        <td>
                            <input type="" name="" placeholder="配偶电话">
                        </td>
                        <td>
                            <input type="" name="" placeholder="微信号">
                        </td>
                        <td>
                            <input type="" name="" placeholder="QQ">
                        </td>
                    </tr>
                </table>
            </div>
            <div class="add-card">
                <table>
                    <tr>
                        <td class="label-td">
                            <label>婚纱套系</label>
                        </td>
                        <td>
                            <input type="" name="" placeholder="婚纱套系">
                        </td>
                        <td class="label-td">
                            <label>婚期</label>
                        </td>
                        <td>
                            <input type="" name="" placeholder="婚期">
                        </td>
                    </tr>
                    <tr>
                        <td class="label-td">
                            <label>地区</label>
                        </td>
                        <td>
                            <input type="" name="" placeholder="省">
                        </td>
                        <td>
                            <input type="" name="" placeholder="市">
                        </td>
                        <td>
                            <input type="" name="" placeholder="区">
                        </td>
                    </tr>
                </table>
            </div>
            <div class="add-card">
                <table>
                    <tr>
                        <td class="label-td">
                            <label>渠道</label>
                        </td>
                        <td>
                            <input type="" name="" placeholder="一级渠道">
                        </td>
                        <td>
                            <input type="" name="" placeholder="二级渠道">
                        </td>
                        <td>
                            <input type="" name="" placeholder="转介绍人">
                        </td>
                    </tr>
                    <!--  <tr>
                        <td>地区</td>
                        <td><input type="" name="" placeholder="省"></td>
                        <td><input type="" name="" placeholder="市"></td>
                        <td><input type="" name="" placeholder="区"></td>
                    </tr> -->
                </table>
            </div>
            <div class="addPanle-title marginT-2x">
                <ul>
                    <li class="add-card-tab-active">预约</li>
                    <li>到店</li>
                </ul>
            </div>
            <div class="add-card">
                <table>
                    <tr>
                        <td class="label-td">
                            <label>预约状态</label>
                        </td>
                        <td>
                            <select>
                                <option>确定意向</option>
                            </select>
                        </td>
                        <td class="label-td">
                            <label>预约时间</label>
                        </td>
                        <td>
                            <input type="" name="" placeholder="预约时间">
                        </td>
                    </tr>
                    <tr>
                        <td class="label-td">
                            <label>邀约客服</label>
                        </td>
                        <td class="borderR">
                            <select>
                                <option>小李</option>
                                <option>小王</option>
                            </select>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="add-card">
                <table>
                    <tr>
                        <td class="label-td">
                            <label>到店时间</label>
                        </td>
                        <td>
                            <input type="" name="" placeholder="到店时间">
                        </td>
                        <td class="label-td">
                            <label>接待人</label>
                        </td>
                        <td>
                            <select>
                                <option>小李</option>
                                <option>小王</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td class="label-td">
                            <label>进店后状态</label>
                        </td>
                        <td class="borderR">
                            <select>
                                <option>成交</option>
                                <option>流失</option>
                            </select>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="add-card-textarea">
                <table>
                    <tr>
                        <td class="label-td borderR">
                            <label>备注</label>
                        </td>
                        <td>
                            <textarea>
                            </textarea>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </template >
</body>
<script>
"use strict";
$(function() {
    //定义表格可拖动列宽
    //$("table").colResizable({});
    // $("table").colResizable({ resizeMode:'overflow'});
    $('#add').on('click', function(event) {
        layer.open({
            type: 1,
            area: ['800px'],
            btn: ['确定', '取消'],
            content: document.querySelector("#addPanle").innerHTML
        });
    });

    $(document).click(function(event) {
        /* Act on the event */
        // 判断当前点击的元素是否是select或者select底下的元素，不是则隐藏所有已展开的select
        let judge1 = $(event.target).parents().hasClass('multiselect-style');
        if (!judge1) {
            $('.multiselect-style ul').slideUp(120);
            $('.multiselect-style>input').removeClass('multiselect-style-active');
            $('.multiselect-style>i').css('transform', 'rotate(0deg)');
        }

        let judge2 = $(event.target).parents().hasClass('select-style');
        if (!judge2) {
            $('.select-style ul').slideUp(120);
        }

    });
    //自定义select样式的事件
    $('.select-style>input').on('click', function(event) {
        if ($(this).nextAll('ul').css('display') == 'block') {
            $(this).nextAll('ul').slideUp(120);
            return;
        }
        $('.select-style ul').slideUp(120);
        $(this).nextAll('ul').slideDown(120);
    });
    $('.select-style ul li').on('click', function(event) {
        $(this).parent('ul').slideUp(120);
        $(this).parent('ul').prev('input').val($(this).text());
    });
    //自定义multiselect样式的事件
    $('.multiselect-style>input,.multiselect-style>i').on('click', function(event) {
        if (event.target.tagName == 'INPUT') {
            if ($(this).nextAll('ul').css('display') == 'block') {
                $(this).nextAll('ul').slideUp(120);
                $(this).nextAll('i').css('transform', 'rotate(0deg)');
                $(this).removeClass('multiselect-style-active');
                return;
            };
        } else {
            if ($(this).nextAll('ul').css('display') == 'block') {
                $(this).nextAll('ul').slideUp(120);
                $(this).css('transform', 'rotate(0deg)');
                $(this).prevAll('input').removeClass('multiselect-style-active');
                return;
            };
        }
        //把其余的先关闭
        $('.multiselect-style>ul').slideUp(120);
        $('.multiselect-style>input').removeClass('multiselect-style-active');
        $('.multiselect-style>i').css('transform', 'rotate(0deg)');
        //设计当前点击的样式
        if (event.target.tagName == 'INPUT') {
            $(this).nextAll('ul').slideDown(120);
            $(this).nextAll('i').css('transform', 'rotate(180deg)');
            $(this).addClass('multiselect-style-active');
        } else {
            $(this).nextAll('ul').slideDown(120);
            $(this).css('transform', 'rotate(180deg)');
            $(this).prevAll('input').addClass('multiselect-style-active');
        }
    });


    $('.multiselect-style>ul li').on('click', function(event) {
        let _check = $(this).find('input[type="checkbox"]')[0].checked;
        $(this).find('input[type="checkbox"]')[0].checked = !_check;

    });
    $('.multiselect-style>ul>li>input').on('click', function(event) {
        let _check = this.checked;
        this.checked = !_check;
    });
});
var select = new Vue({
        el: '#select',
        data: {
            val: '',
            show: false,
            options: [{
                text: '100条/页',
                val: 100
            }, {
                text: '200条/页',
                val: 200
            }, {
                text: '400条/页',
                val: 400
            }]
        },
        created: function() {
            this.val = this.options[0].text;
            window.addEventListener('click', (e) => {
                if (!this.$el.contains(e.target)) {
                    if (this.show == true) this.show = false;
                }
            })
        },
        methods: {
            inputClick: function() {
                this.show = !this.show;
                this.showOpt();
            },
            optClick: function(option) {
                this.val = option.text;
                this.show = !this.show;
            },
            showOpt: function() {
                //let a=this.$el.querySelector("dl").clientHeight;
                let elBottom = this.$el.getBoundingClientRect().bottom;
                let clintBottom = document.body.clientHeight;
                let bottom = clintBottom - elBottom;
                let dtHeight = (this.options.length * 32) + 6;
                if (bottom < dtHeight) {
                    this.$el.querySelector("dl").style.top = (0 - (dtHeight + 2)) + 'px';
                } else {
                    this.$el.querySelector("dl").style.top = 34 + 'px';
                }
            }
        }
    })
    //tabs相关配置
var tabsVue = new Vue({
    el: '#tabs-vue',
    data: {
        //配置tab选项
        isActive: 0,
        tabs: [{
            id: 'tab1', //选项ID ，可不填
            name: '',
            text: '全部客人', //展示文字
            value: '143' //数量
        }, {
            id: 'tab2',
            name: '',
            text: '新客资',
            value: '10'
        }, {
            id: 'tab2',
            name: '',
            text: '待追踪',
            value: '0'
        }, {
            id: 'tab2',
            name: '',
            text: '已预约',
            value: '0'
        }, {
            id: 'tab2',
            name: '',
            text: '已进店',
            value: '0'
        }, {
            id: 'tab2',
            name: '',
            text: '已订单',
            value: '0'
        }, {
            id: 'tab2',
            name: '',
            text: '无效',
            value: '0'
        }]
    },
    methods: {
        //tab切换
        changeTab: function(data, index) {
            this.isActive = index;
            alert('你点击了第' + (index + 1) + '个标签' + '名字是：' + data.text);
        }
    }
});

var Random = Mock.Random;
//分页相关配置
var paging = new Vue({
        el: '#paging',
        data: {
            start: 0, //当前页
            pageLen: 10, //每页显示数量
            totalRecords: 184, //总数据量
            totalPage: '', //总页数,自动计算
            maxShow: 9, //页码最大展示数量
            pages: []
        },
        created: function() {
            this.calePageList();
        },
        methods: {
            turnPage: function(p) {
                //跳转页
                if (isNaN(p)) return;
                this.start = p;
                this.renderPageList();
            },
            forwardPage: function() {
                //前一页
                if (this.start > 0) {
                    this.start -= 1;
                    // this.getData();
                }
                this.renderPageList();
            },
            nextPage: function() {
                //后一页
                if (this.start + 1 < this.totalPage) {
                    this.start += 1;
                    // this.getData();
                }
                this.renderPageList();
            },
            calePageList: function() {
                //总页数的计算方法
                let t = this.totalRecords % this.pageLen;
                if (t == 0) {
                    this.totalPage = this.totalRecords / this.pageLen;
                } else {
                    this.totalPage = parseInt(this.totalRecords / this.pageLen) + 1;
                }
                this.renderPageList();
            },
            renderPageList: function() {
                //渲染列表
                if (this.totalPage <= this.maxShow) {
                    for (let i = 0; i < this.totalPage; i++) {
                        this.$set(this.pages, i, i + 1);
                        // this.pages.push(i + 1);
                    }

                } else {
                    //  [1] [2] [3] [4] [...] [6]
                    if ((this.start + 1) < 5) {
                        for (let i = 0; i < this.maxShow; i++) {
                            if (i == this.maxShow - 2) {
                                this.$set(this.pages, i, '...');
                            } else if (i == this.maxShow - 1) {
                                this.$set(this.pages, i, this.totalPage);
                            } else {
                                this.$set(this.pages, i, i + 1);
                            }
                        }
                    } else if ((this.start + 1) >= 5 && this.start + 5 < this.totalPage) {
                        //[1][...] [3] [4] [5] [6][7] [...] [8]
                        this.$set(this.pages, 0, 1);
                        this.$set(this.pages, 1, '...');
                        this.$set(this.pages, 2, (this.start - 2) + 1);
                        this.$set(this.pages, 3, (this.start - 1) + 1);
                        this.$set(this.pages, 4, this.start + 1);
                        this.$set(this.pages, 5, (this.start + 1) + 1);
                        this.$set(this.pages, 6, (this.start + 2) + 1);
                        this.$set(this.pages, 7, '...');
                        this.$set(this.pages, 8, this.totalPage);
                    } else {
                        //[1][...] [3] [4] [5] [6] [7]
                        this.$set(this.pages, 0, 1);
                        this.$set(this.pages, 1, '...');
                        for (let i = 0; i < 6; i++) {
                            this.$set(this.pages, i + 2, this.totalPage - (6 - i));
                        }
                        this.$set(this.pages, 8, this.totalPage);
                    }

                }
            }
        }
    })
    //table相关配置
var tableVue = new Vue({
    el: '#table-vue',
    data: {
        ticking: false, //控制滚动锁
        //table表头
        tableCheckBox: {
            _width: '' //
        },
        tableHeads: [{
            id: '',
            name: 't1', //对应的字段名称
            text: '预约时间', //名字
            sortAble: true, //是否可排序
            filterAble: false, //是否可过滤
            asc: true, //排序规则
            _width: '', //真实表格的每个表头td的width
            _widthHead: '' //主要为了实现固定表头，和下面的隐藏真实表头的width相对应
        }, {
            id: '',
            name: 't2',
            text: '录入时间',
            sortAble: false,
            filterAble: false,
            asc: true,
            _width: '',
            _widthHead: ''
        }, {
            id: '',
            name: 't3',
            text: '分类',
            sortAble: false,
            filterAble: false,
            asc: true,
            _width: '',
            _widthHead: ''
        }, {
            id: '',
            name: 't4',
            text: '状态',
            sortAble: false,
            filterAble: false,
            asc: true,
            _width: '',
            _widthHead: ''
        }, {
            id: '',
            name: 't5',
            text: '类型',
            sortAble: false,
            filterAble: false,
            asc: true,
            _width: '',
            _widthHead: ''
        }, {
            id: '',
            name: 't6',
            text: '渠道',
            sortAble: false,
            filterAble: false,
            asc: true,
            _width: '',
            _widthHead: ''
        }, {
            id: '',
            name: 't7',
            text: '渠道细分',
            sortAble: false,
            filterAble: false,
            asc: true,
            _width: '',
            _widthHead: ''
        }, {
            id: '',
            name: 't8',
            text: '转介绍人',
            sortAble: false,
            filterAble: false,
            asc: true,
            _width: '',
            _widthHead: ''
        }, {
            id: '',
            name: 't9',
            text: '新娘姓名',
            sortAble: false,
            filterAble: false,
            asc: true,
            _width: '',
            _widthHead: ''
        }, {
            id: '',
            name: 't10',
            text: '新娘电话',
            sortAble: false,
            filterAble: false,
            asc: true,
            _width: '',
            _widthHead: ''
        }, {
            id: '',
            name: 't11',
            text: '新郎姓名',
            sortAble: false,
            filterAble: false,
            asc: true,
            _width: '',
            _widthHead: ''
        }, {
            id: '',
            name: 't12',
            text: '新郎电话',
            sortAble: false,
            filterAble: false,
            asc: true,
            _width: '',
            _widthHead: ''
        }, {
            id: '',
            name: 't13',
            text: '到店时间',
            sortAble: false,
            filterAble: false,
            asc: true,
            _width: '',
            _widthHead: ''
        }, {
            id: '',
            name: 't14',
            text: '婚期',
            sortAble: false,
            filterAble: false,
            asc: true,
            _width: '',
            _widthHead: ''
        }, {
            id: '',
            name: 't15',
            text: '客服',
            sortAble: false,
            filterAble: false,
            asc: true,
            _width: '',
            _widthHead: ''
        }, {
            id: '',
            name: 't16',
            text: '接待礼服师',
            sortAble: false,
            filterAble: false,
            asc: true,
            _width: '',
            _widthHead: ''
        }, {
            id: '',
            name: 't17',
            text: '婚纱照套系',
            sortAble: false,
            filterAble: false,
            asc: true,
            _width: '',
            _widthHead: ''
        }, {
            id: '',
            name: 't18',
            text: '单号',
            sortAble: false,
            filterAble: false,
            asc: true,
            _width: '',
            _widthHead: ''
        }, {
            id: '',
            name: 't19',
            text: '收款',
            sortAble: false,
            filterAble: false,
            asc: true,
            _width: '',
            _widthHead: ''
        }, {
            id: '',
            name: 't20',
            text: '备注',
            sortAble: false,
            filterAble: false,
            asc: true,
            _width: '',
            _widthHead: ''
        }],
        tableDatas: [{
            t1: Random.now('year'),
            t2: Random.now('year'),
            t3: '试西服',
            t4: '已完成',
            t5: '类型1',
            t6: '线下',
            t7: '线下1',
            t8: Mock.mock('@cname()'),
            t9: Mock.mock('@cname()'),
            t10: '15503451572',
            t11: Mock.mock('@cname()'),
            t12: '15503451572',
            t13: Random.now('year'),
            t14: Random.now('year'),
            t15: Mock.mock('@cname()'),
            t16: Mock.mock('@cname()'),
            t17: '浪漫系列',
            t18: '158656',
            t19: '15000',
            t20: '已完成'
        }]
    },
    created: function() {
        //页面创建时，请求后台
        this.getData();
    },
    mounted: function() {
        //页面载入完毕，开始固定表头
        this.creatFixHead();
        //监听resize事件
        window.onresize = () => {
            this.creatFixHead();
        }
    },
    updated: function() {

    },
    methods: {
        //创建固定表头
        creatFixHead: function() {
            let _ths = this.$refs['table-tbody'].querySelectorAll('thead th');
            this.tableCheckBox._width=_ths.item(0).scrollWidth + 'px';
            // alert(_ths.item(0).scrollWidth + 'px');
            //遍历真实表头的每个th的宽度，让实际展示的固定表头的宽度和它相等
            for (var i = 0; i < _ths.length; i++) {
                // if(this.tableHeads[i]['_width']!='') continue;
                this.tableHeads[i ]._widthHead = _ths.item(i).scrollWidth + 'px';
                // console.log(this.tableHeads[i]['_widthHead']);
                // this.tableHeads[i]['_width'] = _ths.item(i).offsetWidth + 'px';
            }
        },
        //表格滚动事件
        tableScroll: function(e) {
            if (!this.ticking) {
                //requestAnimationFrame ,当滚动时，保持固定频率使用滚动函数
                requestAnimationFrame(this.tableBodyScrollDo);
                this.ticking = true;
            }
        },
        tableHeadScrollDo: function() {
            this.$refs['table-tbody'].scrollLeft = this.$refs['table-thead'].scrollLeft;
            this.ticking = false;
        },
        tableBodyScrollDo: function() {
            this.$refs['table-thead'].scrollLeft = this.$refs['table-tbody'].scrollLeft;
            this.ticking = false;
        },
        getData: function() {
            //获取数据
            //页面重新渲染，重新开始固定表头
            setTimeout(this.creatFixHead, 1000 / 60);
        },
        sorting: function(index, name, asc) {
            //排序
            if (asc) {
                alert(name + '排序为正序');
            } else {
                alert(name + '排序为倒序');
            }
            this.tableHeads[index].asc = !asc;
        }
    }
});
</script>

</html>
